<template>
    <div class="wrap">
        <HeaderTop :title="title"></HeaderTop>
        <div v-if="showFace">
            <faceResoult :mode="faceMode" @submint="faceClick" :tips="faceTips" />
        </div>
        <div v-if="showLoading">
            <loadingPage />
        </div>
        <div class="content">
            <img src="~@/assets/imgs/face_img.png" alt="">
            <div class="tips" style="display: none">You only need to take a photo and upload your profile picture to get a loan immediately</div>
            <div class="tips-list">
                <div class="tips-content">
                    <div>Please erect the cellphone</div>
                    <div>Place face into the portrait frame</div>
                    <div>Adequate light</div>
                    <div>No cover on face</div>
                </div>
            </div>
        </div>
        <button class="footer btn-ui" @click="goFace">Next</button>
    </div>
</template>
<script>
import HeaderTop from '@/components/header-top';
import faceResoult from '@/components/faceResoult';
// import Hybrid from '@/components/uzone-hybrid';
import loadingPage from '@/components/loading-page';

export default {
    components: {
        HeaderTop,
        faceResoult,
        loadingPage
    },
    data() {
        return {
            title: 'Facial recognition',
            showFace: false,
            faceTips: 'Face comparison failed. Please click the button below to try again',
            faceMode: 'avatar',
            showLoading:false,
            pageTrackerInfo: {
                page: 'onlyFaceInfo',
                startTime: new Date().getTime()
            }
        }
    },
    beforeDestroy () {
        this.pageEndAction()
    },
    mounted () {
        this.pageStartAction()
        // 人脸识别独立页 - 人脸提示页 - 曝光
        this.$buryPoint.action({
            eventName: 'onlyFaceInfo_faceNote_page_show',
            ...this.pageTrackerInfo
        });
    },
    created(){
        // 人脸识别独立页 - 人脸提示页 - 曝光
        // this.$hybrid.action('ee', {
        //     content: 'onlyFaceInfo_faceNote_page_show',
        //     value: '',
        // });
    },
    methods: {
        faceClick(value) {
            console.warn(value)
            if (value == 'avatar') {
                this.showFace = false
            }
            if (value == 'back') {
                this.$router.go(-1)
            }
        },
        goFace() {
            // 人脸识别独立页 - 人脸提示页 - 点击
            this.$buryPoint.action({
                eventName: 'onlyFaceInfo_faceNote_submit_click',
                ...this.pageTrackerInfo
            });
            // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
            let me = this;
            let appVersion = this.$storage.get('appVersion');
            // if (appVersion >= '1.0.4') {
            if (appVersion >= '1.0.0') {
                //new app apk
                this.$hybrid.action('checkCameraPermission', {
                    callback(data) {
                        console.warn('checkCameraPermission', data)
                        if (data.status == 1) {
                            me.$hybrid.action('checkidentify', {
                                callback(data) {
                                    console.warn('checkidentify', data)
                                    if (data.status == 1) {
                                        //face success
                                        let params = {
                                            type: 1,
                                            img: data.data.url
                                        };
                                        me.associationFaceDetection(params)
                                    }
                                }
                            });
                        }
                    }
                })
            }
            // else {
            //     //old app apk
            //     hybrid.action('discern', {
            //         param: {
            //             count: 1,
            //         },
            //         callback(data) {
            //             console.warn(data, 'discern callback')
            //             if (data.status == 1) {
            //                 if (data.data.status == 1) {
            //                     //face success
            //                     let params = {};
            //                     // if (appVersion >= '1.0.1') {
            //                     if (appVersion >= '1.0.0') {
            //                         //new app apk
            //                         params = {
            //                             type: 1,
            //                             img: data.data.url
            //                         }
            //                     } else {
            //                         //old app apk
            //                         params = {
            //                             type: 2
            //                         }
            //                         me.showLoading = true;
            //                     };

            //                     me.associationFaceDetection(params)
            //                 } else {
            //                     //face fail
            //                     me.showFace = true;
            //                     me.faceTips = 'Please take another photo'
            //                 }
            //             }
            //         }
            //     }
            //     )
            // }

        },
        associationFaceDetection(params) {
            let me = this;
            // 人脸识别独立页 - 人脸认证 - 成功
            this.$buryPoint.action({
                eventName: 'onlyFaceInfo_face_success',
                ...this.pageTrackerInfo
            });
            me.$api.associationFaceDetection(params).then(res => {
                me.showLoading = false;
                let { status, error, data } = res;
                if (status == '1' && error == '00000000') {
                    let { status, repeatFlag } = data;
                    if (status == 0) {
                        // face 1:1 fail
                        if (repeatFlag == 0) {
                            // 'dont try again'
                            me.faceMode = 'back';
                            me.faceTips = "Today's upload times have been exhausted, please try again tomorrow!";
                            me.showFace = true;
                            console.warn('reco')
                            // me.faceTips = ''
                        } else if (repeatFlag == 1) {
                            //  try again'
                            me.faceMode = 'avatar';
                            me.faceTips = "Please take another photo";
                            me.showFace = true;
                        }
                    } else if (status == 1) {
                        // 人脸识别独立页 - 人脸认证 - 人脸1比1
                        me.$buryPoint.action({
                            eventName: 'onlyFaceInfo_face_compare_success',
                            ...me.pageTrackerInfo
                        });
                        me.$router.replace('/product/productList')
                    }
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
